<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for的使用：对象数组</title>
		<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="box11">
			<!-- 
				描述：循环显示学生数组中的学生信息，学生对象包括属性：id，name，age
				描述：循环显示学生数组中的学生信息，学生对象包括属性：id，name，age
			 -->
			 <table border="6">
				 <tr>
					 <th>序号</th>
					 <th>学生编号</th>
					 <th>学生姓名</th>
					 <th>学生年龄</th>
				 </tr>
				 <tr v-for="(stu,i) in students">
				    <td>{{i+1}}</td>
				 	<td>{{stu.id}}</td>
				 	<td>{{stu.name}}</td>
				 	<td>{{stu.age}}</td>
				 </tr>
				 <tr>
				 	<th>序号</th>
				 	<th>老师编号</th>
				 	<th>老师姓名</th>
				 	<th>老师年龄</th>
				 </tr>
				 <tr v-for="(tea,i) in teacher">
				    <td>{{i+1}}</td>
				 	<td>{{tea.id}}</td>
				 	<td>{{tea.name}}</td>
				 	<td>{{tea.age}}</td>
				 </tr>
			 </table>
		</div>
	</body>
	<script>
		/* 构建Vue 生成Vue对象 vm（调度器），Vue( ) 参数为json格式的数据( {属性：值} ) */
		/* ViewModel  */
		var vm=new Vue({
			/* el 参数用来绑定选择器(id选择器),通过选择器找到对应的元素(标签||控件) */
			/* 也就是 View */
			el:"#box11",
			/* 声明 data 的参数用来绑定的控件传值  也就是描述数据*/
			/* 也就是 Model */
			data:{
				students:[
							{id:1001,name:"师张杰",age:20},
							{id:1002,name:"帅张杰",age:21},
							{id:1003,name:"丑张杰",age:22},
						],
				teacher:[
							{id:101,name:"大张杰",age:23},
							{id:102,name:"小张杰",age:24},
							{id:103,name:"老张杰",age:25},
						]
			}
		});
	</script>
</html>
